<template>
  <div class="tree">
    <ul>
      <li v-for="item in data" :key="item.id">
        <span
          :class="{ parent: item.children }"
          :style="{ marginLeft: item.indent }"
          >{{ item.label }}</span
        >
        <Tree
          :data="item.children"
          :indent="indent + 10"
          v-if="item.children"
        />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Tree",
  props: ["data", "indent"],
  computed: {
    treeData() {
      return this.formatData(this.data, this.indent);
    },
  },
  methods: {
    formatData(data, indent) {
      return data.map((item) => {
        item.indent = `${indent}px`;
        if (item.children) {
          item.children = this.formatData(item.children, indent + 10);
        }
        return item;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.tree {
  padding: 0;
  padding-left: 10px;
  font-size: 13px;
  color: #999999;
  ul {
    list-style: none;
    padding-left: 0;
  }
}
.parent {
  //   font-weight: bold;
  color: #333;
  font-size: 16px;
}
</style>